<template>
  <div class="front-notice">
    <el-icon><Bell /></el-icon>
    公告：<span v-html="data.topContent"></span>
  </div>
</template>

<script setup>
import { ref,reactive, onMounted } from "vue";
import request from "@/utils/request.js";
import { Bell } from "@element-plus/icons-vue";
const visible = ref(true)

const toggleNotice = (show) => {
  visible.value = show
}

defineExpose({ toggleNotice })
const data = reactive({
  topContent: '',
  noticeData: []
});

const loadNotice = () => {
  request.post('/notice/selectAll', {
    noticeCategory: 0
  }).then(res => {
    data.noticeData = res.data;
    let i = 0;
    if (data.noticeData && data.noticeData.length) {
      data.topContent = data.noticeData[i].content;
      setInterval(() => {
        data.topContent = data.noticeData[i].content;
        i++;
        if (i === data.noticeData.length) {
          i = 0;
        }
      }, 2500);
    }
  });
};

onMounted(() => {
  loadNotice();
});


</script>

<style scoped>
.front-notice {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 10px;
  background-color: #eef1f6;
  color: #333;
  font-size: 14px;
  position: fixed;  /* 新增 */
  top: 0;          /* 新增 */
  left: 0;         /* 新增 */
  right: 0;        /* 新增 */
  z-index: 1000;   /* 新增 */
  height: 30px;    /* 新增高度 */
}

.el-icon {
  margin-right: 10px; /* 图标和内容之间的间距 */
}
</style>



